<!-- 岗位管理 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <ELTable v-bind="tableConfig">
        <template #btns="{ deleteAll }">
          <el-button type="success" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增岗位
          </el-button>
          <el-button type="danger" @click="deleteAll">
            <el-icon class="icon" />
            新增岗位
          </el-button>
          <el-button type="danger" disabled @click="deleteAll">
            <el-icon class="icon">
              <Delete />
            </el-icon>
            批量删除
          </el-button>
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button :icon="Delete" size="small" class="btn" @click="deleteHandle(scope.row.id)">
            删除
          </el-button>
          <el-button
            :icon="Delete"
            size="small"
            text
            class="btn"
            @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </ELTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import ELTable, { TableData } from "@/components/ELTable.vue";
import { RoleList, RoleDel, RoleDelAll } from "@/api/personel/position/position";
import { useRouter } from "vue-router";
import { Delete, Edit } from "@element-plus/icons-vue";
const router = useRouter();
// 添加
const add = () => {
  router.push("/personel/position-add");
};

// 编辑
const updateEdit = (data: any) => {
  router.push({ path: "position-add", query: { id: data.id } });
};

const tableConfig = reactive<TableData>({
  loadData: RoleList,
  delete: RoleDel,
  deleteAll: RoleDelAll,
  columns: [
    {
      prop: "id",
      label: "序号",
    },
    {
      prop: "name",
      label: "岗位名称",
    },
    {
      prop: "accountCounts",
      label: "关联账号数",
    },
    {
      prop: "addAccountName",
      label: "创建人",
    },
    {
      prop: "addTime",
      label: "创建日期",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
    },
  ],
});
</script>

<style scoped lang="less">
.icon {
  margin-right: 5px;
  font-size: 12px;
}

.btn {
  color: rgb(64, 158, 255);
  border: none;
}

.btn:last-child {
  color: rgb(245, 108, 127);
}
</style>
